<template>
	<view class="container">
		<view class="" style="background-color: #fff;border-radius: 20rpx;">
			<view class="user-section">
				<view class="user-info-box" v-if="userInfo">
					<view class="portrait-box">
						<image class="portrait" :src="userInfo.headImg || 'https://oss.daccf.com/zwnmfe1p572r9r3ycu480/图标/9c23dc67-fa4b-4f20-b96e-3750ab2ee8a7.png'"></image>
						<button class="portrait-icon" open-type="chooseAvatar" @chooseavatar="chooseavatar"><uv-icon name="camera" size="20" color="#fff"></uv-icon></button>
					</view>
					<view class="info-box" style="">
						<view class="" style="display: flex;align-items: center; " v-if="nameShow == 0" @click="nameShow = 1">
							<text class="username">{{ userInfo.userName }}</text>
							<uv-icon name="edit-pen" color="#333" size="24"></uv-icon>
						</view>
						<input v-if="nameShow == 1" type="nickname" @blur="blurname" :focus="true" v-model="userInfo.userName" placeholder="请输入昵称" />
			
						<text class="uid">ID:{{ userInfo.id }}</text>
					</view>
				</view>
				<view class="user-info-box" v-else>
					<view class="portrait-box"><image class="portrait" src="https://oss.daccf.com/zwnmfe1p572r9r3ycu480/图标/9c23dc67-fa4b-4f20-b96e-3750ab2ee8a7.png"></image></view>
					<view class="info-box" style="">
						<text class="username">游客</text>
						<text class="uid">登录后查看</text>
					</view>
				</view>
			</view>
			
			<view class="tj-sction">
			  <view class="tj-item" @click="navTo('/pages/user/membercz/membercz')">
			    <text class="num">￥{{ userInfo.balance }}</text>
			    <text class="name">余额</text>
			  </view>
			  <view class="tj-item">
			    <text class="num">{{ userInfo.integral }}分</text>
			    <text class="name">积分</text>
			  </view>
			  <view class="tj-item" @click="navTo('/pages/user/mycoupon/mycoupon')">
			    <text class="num">{{ couponListTotal }}张</text>
			    <text class="name">优惠券</text>
			  </view>
			</view>
		</view>
		<view class="order-section">
			<view class="order-item" @click="navTo('/pages/order/order?state=-1')" hover-class="common-hover" :hover-stay-time="50">
				<view class="order-image">
					<image src="../../static/one.png" mode="widthFix"></image>
				</uv-icon></view>
				<text>全部订单</text>
			</view>
			<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
				<view class="order-image">					<image src="../../static/two.png" mode="widthFix"></image></view>
				<text>待付款</text>
			</view>
			<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
				<view class="order-image">					<image src="../../static/three.png" mode="widthFix"></image></view>
				<text>待收货</text>
			</view>
			<!-- <view class="order-item" @click="navTo('/pages/order/order?state=5')" hover-class="common-hover" :hover-stay-time="50">
				<view class="order-image">					<image src="../../static/four.png" mode="widthFix"></image></view>
				<text>已完成</text>
			</view> -->
			<view class="order-item" @click="navTo('/pages/order/service?state=8')" hover-class="common-hover" :hover-stay-time="50">
				<view class="order-image">					<image src="../../static/four.png" mode="widthFix"></image></view>
				<text>退款/售后</text>
			</view>
		</view>

		<view class="history-section">
			<view class="list" v-for="item in list" @click="goPath(item)">
				<view class="list-left">
					<uv-icon :name="item.icon" size="21"></uv-icon>
					<view class="title">{{ item.name }}</view>
				</view>
				<view class="list-right"><uv-icon name="arrow-right" color="#333" size="16"></uv-icon></view>
			</view>

			<button open-type="contact">
				<view class="list" style="padding: 0;border: none;">
					<view class="list-left">
						<uv-icon name="chat" size="21"></uv-icon>
						<view class="title">我的客服</view>
					</view>
					<view class="list-right"><uv-icon name="arrow-right" color="#333" size="16"></uv-icon></view>
				</view>
			</button>
		</view>
		<view class="" style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 50rpx;font-size: 26rpx;color: #999;">
			<view class="">大川长风</view>
			<view class="">提供技术与服务平台</view>
			<view class="">v{{ version }}</view>
		</view>
	</view>
</template>
<script>
import {
	searchUserInfoById,
	userIsLogin,
	searchPlugsPetRarchivesList,
	searchUserOrderListByStatus,
	searchPlugsCollectByUserId,
	getRecommen,
	updateUserInfo,
	uploadImages,
	searchPlugsCouponsByUserId
} from '../../utils/api.js';
export default {
	data() {
		return {
			nameShow: 0,
			userInfo: {},
			version: '',
			list: [
				// {
				// 	name: '意向金',
				// 	icon: 'empty-data',
				// 	path: ''
				// },
				{
					name: '我的收藏',
					icon: 'heart',
					path: '/pages/user/collectList/collectList'
				},
				{
					name: '宠物档案',
					icon: 'pushpin',
					path: '/pages/user/catList/catList'
				},
				{
					name: '地址管理',
					icon: 'map',
					path: '/pages/address/address'
				},
				// {
				// 	name: '关注公众号',
				// 	icon: 'checkmark-circle',
				// 	path: '/pages/user/guanzhu/guanzhu'
				// },
				{
					name: '意见反馈',
					icon: 'edit-pen',
					path: '/pages/user/Feedback/Feedback'
				}
			],
			petfilesList: [],
			orderListTotal: 0,
			collectTotal: 0,
			swiperList: [],
			couponListTotal:0
		};
	},
	onLoad() {},
	onShow() {
		// if(uni.getStorageSync('userInfo')){
		// 	// this.userInfo=uni.getStorageSync('userInfo')
		// 	this.getuserInfo()
		// }else{
		// 	uni.showToast({
		// 		icon:'error',
		// 		title:'登录失效'
		// 	})
		// 	setTimeout(()=>{
		// 		uni.navigateTo({
		// 			url:'/pages/login/login'
		// 		})
		// 	},500)
		// }

		userIsLogin().then(sult => {
			if (sult.body.isLogin) {
				this.getuserInfo();
				this.getOrderList();
				this.getcollectList();
				this.getswiperList();
				this.getcouponList()
				const miniProgram = wx.getAccountInfoSync();
				this.version = miniProgram.miniProgram.version;
			} else {
				console.log('2222222222222222222222222222222');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 500);
			}
		});
	},

	methods: {
		getuserInfo() {
			let self = this;
			let data = {
				userId: uni.getStorageSync('userInfo').id
			};
			searchUserInfoById(data).then(res => {
				if (res.code == 200) {
					console.log(res.body);
					this.userInfo = res.body;
				}
			});
		},
		getswiperList() {
			let data = {
				// businessId: this.nowBusinessInfo.jsonViewData.businessId.toString()
				businessId: -1
			};
			getRecommen(data).then(res => {
				if (res.code == 200) {
					// this.carouselList = res.body
					this.swiperList = res.body.filter(itm => itm.type === 'shiping');
				}
			});
		},
		goPath(item) {
			
				uni.navigateTo({
					url: item.path
				});
		},
		getOrderList() {
			let data = {
				orderStatus: -1,
				startPage: 1
			};
			searchUserOrderListByStatus(data).then(res => {
				if (res.code == 200) {
					this.orderListTotal = res.body.total;
				}
			});
		},
		getcollectList() {
			let self = this;
			let postdata = {
				businessId: -1,
				page: 1,
				size: 50
			};
			searchPlugsCollectByUserId(postdata).then(res => {
				if (res.code == 200) {
					this.collectTotal = res.body.total;
				}
			});
		},
		getcouponList() {
		  let postdata = {
		    businessId: -1,
		    status: 0,
		  };
		
		  searchPlugsCouponsByUserId(postdata).then((res) => {
		    if (res.code == 200) {
		      this.couponListTotal = res.body.total;
		    }
		  });
		},
		goCollect() {
			uni.navigateTo({
				url: '/pages/user/collectList/collectList'
			});
		},
		goUser() {
			uni.navigateTo({
				url: '/pages/user/userInfo'
			});
		},
		goOrder() {
			uni.navigateTo({
				url: '/pages/order/order'
			});
		},
		getPathTap() {
			uni.navigateTo({
				url: '/pages/user/editCat/editCat'
			});
		},
		chooseavatar(img) {
			let that = this;
			uni.showLoading({
				title: '头像更新中',
				mask: true
			});
			console.log(img);
			// updateUserInfo, uploadImages
			let data = {
				file: img.detail.avatarUrl, //你要传的临时文件
				type: 1
			};
			uploadImages(data).then(res => {
				if (res.code == 200) {
					that.userInfo.headImg = res.body;
					updateUserInfo(that.userInfo).then(ues => {
						if (ues.code == 200) {
							uni.hideLoading();
							this.getuserInfo();
							uni.showToast({
								title: '更新成功'
							});
						}
					});
				} else {
					uni.hideLoading();
					uni.showModal({
						content: res.msg,
						showCancel: false
					});
				}
			});
		},
		blurname(e) {
			// console.log(e,788);
			let that = this;
			that.userInfo.userName = e.detail.value;
			updateUserInfo(that.userInfo).then(ues => {
				if (ues.code == 200) {
					uni.hideLoading();
					this.getuserInfo();
					uni.showToast({
						title: '更新成功'
					});
					that.nameShow = 0;
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		goshiping() {
			console.log(12);
			wx.openChannelsUserProfile({
				finderUserName: this.swiperList[0].detailsImgAndPageUrl,
				success: function(res) {
					return uni.showToast({
						title: '已跳转',
						icon: 'none'
					});
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	}
};
</script>
<style lang="scss">
page {
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	background-color: #f5f5f5 !important;
}

.user-section {
	padding: 20rpx 30rpx 0;
	border-radius: 20rpx;
	.user-info-box {
		height: 180rpx;
		display: flex;
		align-items: center;
		z-index: 1;
		.portrait-box {
			width: 130rpx;
			height: 130rpx;
			// border: 5rpx solid #fff;
			border-radius: 50%;
			position: relative;
			.portrait {
				width: 130rpx;
				height: 130rpx;
				// border: 5rpx solid #fff;
				border-radius: 50%;
				vertical-align: top;
			}
			.portrait-icon {
				background-color: #ed781b;
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 0;
				right: -10rpx;
			}
		}

		.info-box {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			.username {
				font-size: 36rpx;
				font-weight: 700;
				margin-bottom: 15rpx;
			}
			.uid {
				font-size: 24rpx;
			}
		}
	}
}
.tj-sction{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:30rpx ;
	margin-top: 20rpx;

	.tj-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 120rpx;
		height: 100rpx;
	}
}
.order-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	border-radius: 20rpx;
	padding:30rpx ;
	margin-top: 20rpx;
	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #303133;
		.order-image{
			width: 80rpx;
			image{
				width: 80rpx;
				// height: 100rpx;
			}
		}
	}
	
}
.history-section {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 20rpx;
	margin-top: 20rpx;
	button {
		width: 100%;
		padding: 0;
		color: #333;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		background-color: #fff;
	}
	button::after {
		border: none;
		padding: 0;
	}
	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 30rpx 0;
		.list-left {
			display: flex;
			align-items: center;
			.title {
				font-size: 32rpx;
				margin-left: 10rpx;
				color: $uni-text-color;
			}
		}
		.list-right {
		}
	}
}
</style>
